<template>
  <view>
    <view class="flex-column-center user-desc"
          :style="{background: `linear-gradient(to right,${color.hex},${color.rgba})`}">
      <view class="edit-btn flex-center" @click="openColorSetting">
        <up-icon name="edit-pen" size="24" color="#fff"></up-icon>
      </view>
      <up-avatar
          text="北"
          fontSize="20"
          size="50"
          randomBgColor
      ></up-avatar>
      <view class="m-t-20 f-c-f" style="font-weight: 600">美食探险家</view>
      <view class="m-t-20 f-c-f">热爱烹饪的厨房小白，记录每一次下厨的惊喜！</view>
    </view>
    <a-card :shadow="false">
      <view class="grid-4">
        <view class="text-center" v-for="(item,index) in data" :key="index">
          <view style="font-weight: 600;font-size: 34rpx" :style="{color: color.hex}">
            {{ numberFormat(item.value) }}
          </view>
          <view class="f-c-9 m-t-20 u-f-sm">{{ item.label }}</view>
        </view>
      </view>
    </a-card>
    <!-- 操作区 -->
    <view class="grid-4 p-20 u-f-sl f-c-3">
      <view class="sub-card" v-for="(item,index) in subMenu" :key="index" @click="toPath(item.path)">
        <image :src="item.icon" class="oper-icon"/>
        <view class="m-t-20">{{ item.label }}</view>
      </view>
    </view>
    <a-card :shadow="false" class="u-f-sl f-c-3">
      <view class="flex-between p-c-20" @click="ercodeRef.open()">
        <view class="menu-title">厨师码</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
      <view class="flex-between p-c-20">
        <view class="menu-title">今日点餐</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
      <view class="flex-between p-c-20">
        <view class="menu-title">新菜发布</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
      <view class="flex-between p-c-20">
        <view class="menu-title">我的大厨</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
      <view class="flex-between p-c-20">
        <view class="menu-title">我的馋猫</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
      <view class="flex-between p-c-20">
        <view class="menu-title">绑定厨师</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
      <view class="flex-between p-c-20" @click="toPath('/cook/setting/setting')">
        <view class="menu-title">设置</view>
        <up-icon name="arrow-right" size="20" :color="color.hex"></up-icon>
      </view>
    </a-card>
  </view>
  <a-float-menu/>
  <color-setting ref="colorRef"></color-setting>
  <cook-ercode ref="ercodeRef"></cook-ercode>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue';
import {numberFormat} from "@/util/number";
import {toPath} from "@/util/router/router";
import ColorSetting from "@/cook/components/color-setting.vue";
import {useThemeStore} from "@/store/theme";
import {storeToRefs} from 'pinia'

const themeStore = useThemeStore()
const {cookColor} = storeToRefs(themeStore) // 保持响应式
const data = ref([
  {
    label: "作品",
    value: 23
  },
  {
    label: "点赞",
    value: 29999
  },
  {
    label: "粉丝",
    value: 23154884
  },
  {
    label: "菜单",
    value: 3
  }
])
const subMenu = ref([
  {
    label: "收藏",
    path: "/cook/MyCook/collect",
    icon: "/static/icon/food/hongzao.png"
  },
  {
    label: "喜欢",
    path: "/cook/MyCook/cookLike",
    icon: "/static/icon/food/tiantianquan.png"
  },
  {
    label: "关注",
    path: "/cook/MyCook/myFollow",
    icon: "/static/icon/food/jiandan.png"
  },
  {
    label: "发布",
    path: "/cook/MyCook/myPublish",
    icon: "/static/icon/food/yu.png"
  }
])

const ercodeRef = ref(null)

const colorRef = ref(null)
const color = ref()

watch(cookColor, (val) => {
  color.value = val
}, {immediate: true})
const openColorSetting = () => {
  colorRef.value.open()
}


</script>


<style scoped lang="scss">
@import "@/static/css/index.css";
.user-desc {
  padding: 100rpx 0 50rpx 0;
  background: linear-gradient(to right, #ff6d70, rgba(255, 157, 160, 0.4));
}

.oper-icon {
  width: 40rpx;
  height: 40rpx;
}

.edit-btn {
  position: absolute;
  top:50rpx;
  right: 30rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #ff6d70;
}

.menu-title{
  position: relative;
  padding-left: 15rpx;
}

.menu-title::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  border-left: 4rpx #ff6d70 solid;
}
</style>
